<template>
  <div>
    <el-button type="primary" @click="addCateClick">新增做法</el-button>

    <el-table :data="dataList" stripe border style="width: 100%;"
              :cell-style="{'text-align':'center'}"
              :header-cell-style="{'text-align':'center'}">
      <el-table-column prop="categoryName" label="名称"></el-table-column>
      <el-table-column prop="price" label="加价"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editClick(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
                   :current-page="params.current" :page-sizes="[10, 20, 30, 50]" :page-size="params.size"
                   :layout="params.total<10?'->,total':'->,total, sizes, prev, pager, next, jumper'" :total="params.total">
    </el-pagination>
    <!-- 新增/编辑对话框 -->
    <el-dialog :title="(isEdit ? '编辑' : '新增') + '做法'" v-if="dialogVisible"  :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="做法名称">
          <el-input v-model="curRow.categoryName" placeholder="请输入做法名称"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  KAFEE_GET_CATE_DETAIL, KAFEE_POST_ADD_CATE,
  KAFEE_POST_CATE_DELETE,
  KAFEE_POST_CATE_LIST,
  KAFEE_POST_EDIT_CATE
} from "@/assets/const/api";

export default {
  name: 'makingIndex',
  mixins: [],
  components: {},
  props: {},
  data () {
    return {
      dataList: [],
      dialogVisible: false,
      isEdit: false,
      form: {
        id: null,
        categoryName: '',
        img: ''
      },
      params:{
        current:1,
        size:10,
        total:0,
      },
      fileList: [],
      curRow:{},
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted() {
    this.getData()
  },
  methods: {
    getData(){
      this.$http.get(KAFEE_POST_CATE_LIST,this.params).then(res => {
        this.dataList = res.data?.records||[];
        this.params.total = res.data.total||0;
      });
    },
    addCateClick() {
      this.isEdit = false;
      this.form = { id: null, name: '', img: '' };
      this.fileList = [];
      this.dialogVisible = true;
    },
    editClick(row) {
      this.isEdit = true;
      this.$http.get(KAFEE_GET_CATE_DETAIL,{id:row.id}).then(res => {
        this.dialogVisible = true;
        this.curRow  = res.data;
      });
    },
    deleteClick(row) {
      this.$confirm('确认删除该分类吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(KAFEE_POST_CATE_DELETE, {id:row.id}).then(res => {
          this.$message.success('删除成功');
          this.params.current = 1;
          this.getData();
        })
      }).catch(() => {});
    },
    submitForm() {
      if (!this.curRow.categoryName) {
        this.$message.warning('请填写分类名称');
        return;
      }
      this.dialogVisible = false;
      let url = this.isEdit?KAFEE_POST_EDIT_CATE:KAFEE_POST_ADD_CATE;
      let dic = this.isEdit?{categoryName:this.curRow.categoryName,id:this.curRow.id}:{categoryName:this.curRow.categoryName};
      this.$http.post(url, dic).then(res => {
        if (res.code === 200) {
          this.$message.success(this.isEdit ? '修改成功' : '新增成功');
          this.getData();
        }
      })
    },
    handleCurrentChange(page){
      this.params.current = page;
      this.getData();
    },
    handleSizeChange(size){
      this.params.current = 1;
      this.params.size = size;
      this.getData();
    },
    handleUploadSuccess(res, file) {
      // 这里处理上传成功后的逻辑，实际项目中需要替换为真实的上传逻辑
      this.form.img = URL.createObjectURL(file.raw);
    },
    handleRemove() {
      this.form.img = '';
    },
    beforeUpload(file) {
      // 验证文件类型和大小
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImage) {
        this.$message.error('只能上传图片文件');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB');
        return false;
      }
      return true;
    }
  }
}
</script>

<style scoped lang="scss">

</style>